<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
      <el-form-item label="项目代码" prop="code">
        <el-input 
          v-model="queryParams.code"
          placeholder="请输入项目代码"
          clearable
          size="small"
          style="width: 10vw;"
          @keyup.enter.native="viewList"
        />
      </el-form-item>
      <el-form-item label="委托单位" prop="party">
         <el-input 
          v-model="queryParams.party"
          placeholder="请输入委托单位"
          clearable
          size="small"
          style="width: 10vw;"
          @keyup.enter.native="viewList"
        />
      </el-form-item>
      <el-form-item label="业务类别" prop="business">

        <el-cascader
          v-model="queryParams.business"
          :options="categoryOptions"
          :show-all-levels="false"
          :props="{ value: 'id',emitPath:false }"
          filterable
          clearable
          style="width: 10vw"
          placeholder="请选择业务类别"
        />
      </el-form-item>
      <el-form-item label="所在地区" prop="areas">

        <el-cascader
            v-model="queryParams.areas"
            :options="areaOptions"
            filterable
            clearable
            :props="{ value: 'id',checkStrictly: true }"
            style="width:10vw"
            @change="getLastNodes"
            placeholder="请选择所在地区"
          />
      </el-form-item>
      <el-form-item label="项目名称" prop="showProjectName">
        <el-input 
          v-model="queryParams.showProjectName"
          placeholder="请输入项目名称"
          clearable
          size="small"
          style="width: 10vw;"
          @keyup.enter.native="viewList"
        />
      </el-form-item>
      <el-form-item label="所属行业">
        <el-cascader
          v-model="queryParams.industrys"
          :options="industryOptions"
          filterable
          clearable
          :props="{ value: 'id',checkStrictly: true }"
          style="width:10vw"
          @change="getLastNodesIndustry"
          placeholder="请选择所属行业"
        />
      </el-form-item>
      <el-form-item label="项目特征" prop="engineerCode">
        <el-select
          v-model="queryParams.engineerCode"
          placeholder="请选择项目特征"
          clearable
          filterable
          size="small"
          style="width: 10vw;"
          @keyup.enter.native="viewList"
        >
          <el-option
            v-for="item in bmsMdEngineeringCategorys"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否保密工程" prop="isSecurity" v-if="showFlag">
        <el-select
          v-model="queryParams.isSecurity"
          placeholder="请选择是否保密工程"
          clearable
          size="small"
          style="width: 10vw;"
          @keyup.enter.native="viewList"
        >
          <el-option
            v-for="item in securityOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否分享" prop="isShare" v-if="showFlag">
        <el-select
          v-model="queryParams.isShare"
          placeholder="请选择是否分享"
          clearable
          size="small"
          style="width: 10vw;"
          @keyup.enter.native="viewList"
        >
          <el-option
            v-for="item in shareOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="viewList">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="panel">
        <div :key="item" v-for="item in dateRange" style="" >
          <img :src="item.showProjectMain" @click="skipProjectDetail(item.guid)" />
          <div class="imgLabelBack"></div>
          <div class="imgLabel">{{item.showProjectName}}</div>
        </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :layout="layout"
      :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
      @pagination="viewList"
    />
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe
        :src="manualPreviewUrl"
        frameborder="0"
        width="100%"
        height="700px"
      ></iframe>
    </el-dialog>
  </div>
</template>
<script>
import { workflowView } from "@/api/workflow/workflow";
import { treeselect } from "@/api/system/business_category";
import { provinceCity, provinceCityTree } from '@/api/provinceCity';
import { workflowTypelist } from "@/api/system/workflowConfig";
import aTitle from "@/components/Title";
import { listProjectShow } from "@/api/projectShowLibrary/projectShowLibrary";
import { industryCategoryTreeTwo } from '@/api/industryCategory';
export default {
  name: "ProjectShowPage",
  components: { aTitle },
  data() {
    return {
      industryOptions: [],
      areaOptions: [],
      categoryOptions: [],
      manualPreviewUrl: null,
      openPreview: false,
      layout: "total, prev, pager, next, jumper",
      total: 10,
      projectRoutes: [],
      tableData: [],
      dateRange: [],
      bmsMdEngineeringCategorys:undefined,
      securityOptions:[{
        dictValue: "0",
        dictLabel: "否"
      },{
        dictValue: "1",
        dictLabel: "是"
      }],
      shareOptions:[{
        dictValue: "0",
        dictLabel: "不分享"
      },{
        dictValue: "2",
        dictLabel: "部分分享"
      },{
        dictValue: "1",
        dictLabel: "完整分享"
      }],
      showFlag:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 6,
        party: undefined,
        showProjectName: undefined,
        projectLeader: undefined,
        isSecurity: undefined,
        isShare:undefined,
        code:undefined,
        engineerCode:undefined,
        industrys:undefined,
        areas:undefined,
        industry:undefined,
        business:this.business
      },
      loading: true,
      tableData: [],
    };
  },
  created() {

    const userInfo = JSON.parse(sessionStorage.getItem("userinfo") || {});
    console.log(userInfo.roles);//角色，"project_show_library_see"，"project_show_library_manager"
    console.log(userInfo.userName);//登录名
    if(userInfo.userName==="admin"){
      this.showFlag = true;
    }

    if(userInfo.roles.length>0){
      userInfo.roles.forEach(item => {
        if(item.roleKey=="project_show_library_see" || item.roleKey=="project_show_library_manager"){
          this.showFlag = true;
        }
      });
    }

    //工程类别
    this.getDicts("project_show_trait").then((response) => {
      this.bmsMdEngineeringCategorys = response.data;
    });
    //行业类别
    industryCategoryTreeTwo().then(res => {
      if (res.code === 200) {
        this.industryOptions = res.data
      }
    })
    //省市区加载
        provinceCityTree().then((res) => {
          if (res.code === 200) {
            this.areaOptions = res.data;
          }
        });
    this.getListWorkflowConfig();
    this.viewList();
    treeselect().then((res) => {
      if (res.code === 200) {
        this.categoryOptions = res.data;
      }
    });
     
  },
  methods: {
    skipProjectDetail(guid){

      let routeUrl = this.$router.resolve({
         path: "/projectShowDetailPage",
         query: {guid:guid}
       });
       window.open(routeUrl.href, '_blank');
    },
    getListWorkflowConfig(){
      workflowTypelist().then(res=>{
        this.workflowTypes = res.data;
      });
    },
    preview() {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}首页/流程搜索.xlsx`
      )}&name=${encodeURIComponent("流程搜索.xlsx")}`;
    },
    viewList() {
      var reqParam ={
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        party: this.queryParams.party,
        showProjectName: this.queryParams.showProjectName,
        isSecurity: this.queryParams.isSecurity,
        isShare:this.queryParams.isShare,
        code:this.queryParams.code,
        industry:this.queryParams.industry,
        business:this.queryParams.business,
        engineerCode:this.queryParams.engineerCode,
        area:this.queryParams.area
      };
      listProjectShow(reqParam).then(res=>{
        if(res.code==200){
          this.total = res.total;
          this.dateRange = res.rows;
        }
      });
    },
    reset() {
      this.queryParams={
        pageNum: 1,
        pageSize: 6,
        party: undefined,
        showProjectName: undefined,
        projectLeader: undefined,
        isSecurity: undefined,
        isShare:undefined,
        code:undefined,
        industry:undefined,
        industrys:undefined,
        areas:undefined,
        business:undefined,
        engineerCode:undefined
      }
      this.viewList();
    },
    getLastNodes (val) {
      //this.queryParams.area = val[0] + ',' + val[1] + ',' + val[2];
      if(val.length===0){
        this.queryParams.area="";
      }
      if(val[0]){
        this.queryParams.area = val[0]+';';
      }
        
      if( val[1]){
        this.queryParams.area = val[0]+';'+val[1]+';';
      }
      if( val[2]){
        this.queryParams.area = val[0]+';'+val[1]+ ';' + val[2]+';';
      }
    },
    getLastNodesIndustry (val) {
      if(val.length===0){
        this.queryParams.industry="";
      }
      if(val[0]){
        this.queryParams.industry = val[0] + ';' ;
      }
      if(val[1]){
        this.queryParams.industry = val[0] + ';' + val[1]+';';
      }
      if(val[2]){
        this.queryParams.industry = val[0] + ';' + val[1]+';' + val[2]+';';
      }

    }
  },
};
</script>
<style lang="scss" scoped>
form.el-form{
  padding: 10px 10vw !important;
  border-bottom: 1px solid #CCC;
}
.panel{
  padding: 10px 10vw !important;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
}
.panel>div{
  width: 33.33%;
  padding: 10px;
}

.panel>div img{
  width: 100%;
  height: 230px;
  overflow: hidden;
}
.panel>div div.imgLabel{
  width: 100%;
  max-width: 100%;
  word-break:keep-all;
  white-space: nowrap;
  padding: 8px 10px;
  color: #FFF;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: -35px;
  opacity: 1;
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
}
.panel>div div.imgLabelBack{
  width: 100%;
  background-color:rgba(0,0,0,0.52);
  margin-top: -38px;
  height: 35px;
}

.tabletitle {
  padding-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfe6ec;
  span {
    font-family: Microsoft YaHei;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: -0.41px;
  }
  .el-button--medium {
    font-size: 12px;
    padding: 7px 13px;
  }
}

/deep/.el-table .cell {
  font-family: PingFangSC-Regular;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0;
  a {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1890ff;
    letter-spacing: 0;
    text-align: right;
    line-height: 14px;
    margin-left: 5px;
  }
}

/deep/.el-table--medium td {
  padding: 12px 0;
}
</style>